import { Card, Radio, Input, Button, message } from "antd";
import { useState } from "react";
import { writeText } from '@tauri-apps/api/clipboard';

function UrlPanel() {
    const [mode, setMode] = useState<"encode" | "decode">("encode");
    const [srcData, setSrcData] = useState("");
    const [destData, setDestData] = useState("");

    return (
        <Card title="Url编解码" bordered={false} bodyStyle={{ height: "calc(100vh - 100px)", overflowY: "auto" }} extra={
            <Radio.Group value={mode} onChange={e => {
                e.stopPropagation();
                setMode(e.target.value);
                if(e.target.value == "encode"){
                    setDestData(encodeURIComponent(srcData));
                }else if(e.target.value == "decode"){
                    setDestData(decodeURIComponent(srcData));
                }
            }}>
                <Radio value="encode">编码</Radio>
                <Radio value="decode">解码</Radio>
            </Radio.Group>
        }>
            <h3>源内容</h3>
            <Input.TextArea rows={6} value={srcData} onChange={e => {
                e.stopPropagation();
                e.preventDefault();
                setSrcData(e.target.value);
                if (mode == "encode") {
                    setDestData(encodeURIComponent(e.target.value));
                } else if (mode == "decode") {
                    setDestData(decodeURIComponent(e.target.value));
                }
            }} />
            <div style={{ position: "relative" }}>
                <h3>目标内容</h3>
                <Button type="primary" disabled={destData == ""} style={{ position: "absolute", top: 0, right: "20px" }} onClick={e => {
                    e.stopPropagation();
                    e.preventDefault();
                    writeText(destData).then(() => message.info("复制成功"));
                }}>复制</Button>
            </div>
            <Input.TextArea rows={6} disabled value={destData} />
        </Card>
    );
}

export default UrlPanel;